<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>个人统计</title>

<%@include file="/WEB-INF/views/commons/common.jsp" %>

<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/jquery-easyui/1.4.3/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/bootstrap-dialog3/css/bootstrap-dialog.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/ui-frame/validation-engine/validationEngine.jquery.css">
<link rel="stylesheet" type="text/css" href="${base_href}/static/css/search-theme.css">

</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript" src="${base_href}/static/ui-frame/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="${base_href}/static/ui-frame/echarts/echarts.common.min.js"></script>

<script type="text/javascript">

	$(function() {
		var statisticsData = new Array();
		$.ajax({
			url:  basePath+"/statisticsController/getMyListIn5Days.json?",
			type: "get",
			async: false, //不可异步,必须同步
			traditional: true,
			dataType:"json",
			success: function(r){ statisticsData =r; }
		})
		.fail(function() { BootstrapDialog.alert({title: "提示", message:"获取数据失败，请联系管理员。"}); })
	
		var myChart = echarts.init(document.getElementById('main'));
		var app = {};
		option = null;
		app.title = '柱状图框选';
		
		var xAxisData = [];
		var data1 = [];
		var data2 = [];
		var data3 = [];
	
		
		for (var i = 0; i < statisticsData.length; i++) {
			xAxisData.push(statisticsData[i]['replyTime']);
			data1.push(statisticsData[i]['easyNum']);
			data2.push(statisticsData[i]['normalNum']);
			data3.push(statisticsData[i]['diffNum']);
		}
	
		var itemStyleEasy = {
			normal : {
				color: new echarts.graphic.LinearGradient(
					0, 0, 0, 1,
					[
						{offset: 0, color: '#1fc3e8'}
					]
				)},
			emphasis : {
				color: new echarts.graphic.LinearGradient(
					0, 0, 0, 1,
					[
						{offset: 0, color: '#1fc3e8'},
					]
				),
				barBorderWidth : 1,
				shadowBlur : 10,
				shadowOffsetX : 0,
				shadowOffsetY : 0,
				shadowColor : 'rgba(0,0,0,0.5)'
			}
		};
		var itemStyleNormal = {
				normal : {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{offset: 0, color: '#250dad'}
						]
					)},
				emphasis : {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{offset: 0, color: '#250dad'},
						]
					),
					barBorderWidth : 1,
					shadowBlur : 10,
					shadowOffsetX : 0,
					shadowOffsetY : 0,
					shadowColor : 'rgba(0,0,0,0.5)'
				}
			};
		var itemStyleDiff = {
				normal : {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{offset: 0, color: '#ff1913'}
						]
					)},
				emphasis : {
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{offset: 0, color: '#ff1913'},
						]
					),
					barBorderWidth : 1,
					shadowBlur : 10,
					shadowOffsetX : 0,
					shadowOffsetY : 0,
					shadowColor : 'rgba(0,0,0,0.5)'
				}
			};
	
		option = {
			backgroundColor : '#eee',
			legend : {
				data : [ '简单', '一般', '困难' ],
				align : 'left',
				left : 10
			},
			brush : {
				toolbox : [ 'rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear' ],
				xAxisIndex : 0
			},
			toolbox : {
				feature : {
					magicType : {
						type : [ 'stack', 'tiled' ]
					},
					dataView : {}
				}
			},
			tooltip : {},
			xAxis : {
				data : xAxisData,
				name : '日期',
				silent : false,
				axisLine : {
					onZero : true
				},
				splitLine : {
					show : false
				},
				splitArea : {
					show : false
				}
			},
			yAxis : {
				inverse : false,
				splitArea : {
					show : false
				}
			},
			grid : {
				left : 100
			},
			visualMap : {
				type : 'continuous',
				dimension : 1,
				text : [ 'High', 'Low' ],
				inverse : false,
				itemHeight : 200,
				calculable : true,
				min : -2,
				max : 6,
				top : 60,
				left : 10,
				inRange : {
					colorLightness : [ 0.4, 0.8 ]
				},
				outOfRange : {
					color : '#bbb'
				},
				controller : {
					inRange : {
						color : '#2f4554'
					}
				}
			},
			series : [ {
				name : '简单',
				type : 'bar',
				stack : 'one',
				itemStyle : itemStyleEasy,
				data : data1
			}, {
				name : '一般',
				type : 'bar',
				stack : 'one',
				itemStyle : itemStyleNormal,
				data : data2
			}, {
				name : '困难',
				type : 'bar',
				stack : 'two',
				itemStyle : itemStyleDiff,
				data : data3
			} ]
		};
	
		myChart.on('brushSelected', renderBrushed);
	
		function renderBrushed(params) {
			var brushed = [];
			var brushComponent = params.batch[0];
	
			for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
				var rawIndices = brushComponent.selected[sIdx].dataIndex;
				brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
			}
	
			myChart.setOption({
				title : {
					backgroundColor : '#333',
					text : 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
					bottom : 0,
					right : 0,
					width : 100,
					textStyle : {
						fontSize : 12,
						color : '#fff'
					}
				}
			});
		}
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	});
</script>
</html>
